<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>08_条件渲染</title>
  </head>
  <body>
    <!--
      1. 条件渲染指令
        v-if
        v-else
        v-show
      2. 比较v-if与v-show
        如果需要频繁切换 v-show 较好
      -->

    <div id="app">
      <p v-if="isShow">静哥真帅11</p>
      <p v-else-if="false">静哥真帅22</p>
      <p v-else-if="false">静哥真帅33</p>

      <p v-if="false">静哥真帅44</p>
      <p v-else>静哥真帅55</p>

      <p v-show="isShow">静哥真帅66</p>
      <button @click="change">按钮</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      /*
        v-if和v-show：实现元素显示或隐藏
        区别：
          v-if：隐藏时元素会被移除
          v-show：隐藏时通过样式display:none
        
        如果频繁使用；用v-show较好，性能开销小
        如果不频繁使用：用v-if较好
      */
      new Vue({
        el: "#app",
        data: {
          // 当用户界面会发生变化，就要定义data
          isShow: true,
        },
        methods: {
          change() {
            this.isShow = !this.isShow;
          },
        },
      });
    </script>
  </body>
</html>
